<template>
  <div>
    <el-container>
      <el-header class="header">
        <router-link to="/" class="logo">WoniuLab</router-link>
        <div v-if="!loginStatus">
          <el-button type="primary" @click="login" class="login-button">登录</el-button>
        </div>
        <div v-if="loginStatus" @click="individualCenter">
          <el-dropdown @command="handleCommand">
            <el-avatar :src="userAvatar" size="medium" ></el-avatar>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
    </el-container>
    <el-container>
      <el-aside width="200px">
        <el-menu default-active="1" class="el-menu-vertical-demo">
          <el-menu-item index="1">
            <router-link to="/" tag="span">在线实验室</router-link>
          </el-menu-item>
          <el-menu-item index="2">
            <router-link to="/articles" tag="span">专题文章</router-link>
          </el-menu-item>
          <el-menu-item index="3">
            <router-link to="/onlineVideo" tag="span">在线视频</router-link>
          </el-menu-item>
          <el-menu-item index="4">
            <router-link to="/userRanking" tag="span">用户排名</router-link>
          </el-menu-item>
          <el-menu-item index="4" v-if="loginStatus != null">
            <router-link to="/UserCenter" tag="span">個人中心</router-link>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>

import Cookies from 'js-cookie'

export default {
  name: "HomePage",
  data() {
    return {
      loginStatus: '',
      userAvatar: '',
      permission: -1
    };
  },
  methods: {
    handleCommand(command) {
      if (command === "logout") {
        this.logout();
      }
    },
    logout() {
      this.$confirm('您确定要退出登录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        Cookies.remove('user');
        this.loginStatus = '';
        this.$message({
          type: 'success',
          message: '已成功退出登录！'
        });
        this.$router.push('/');
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出登录'
        });
      });
    },
    login() {
      // 跳转到登录页面或打开登录弹窗
      this.$router.push("/Login");
    },
    isUserLoggedIn() {
      // this.loginStatus = sessionStorage.getItem("token");
      this.loginStatus = Cookies.get('user');
      const params = {
        token: this.loginStatus
      }
      if (this.loginStatus) {
        this.$axios.post('/userinfo/analysis',params).then(res => {
          this.userAvatar = res.data.data.userIcon;
          this.permission = res.data.data.permission;
        })
      }
    },
    individualCenter() {
      // 跳转到登录页面或打开登录弹窗
      if (this.permission === 2) {
        this.$router.push("/UserCenter");
        return;
      }
      this.$router.push("/MangerHome")
    },
  },
  computed: {
    // userAvatar() {
    //   // 替换为实际的用户头像 URL
    //   return 'https://example.com/avatar.jpg';
    // },
  },
  created() {
    this.isUserLoggedIn()
  },
}
</script>

<style scoped>
.logo {
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
    margin-left: 45px;
    color: #409eff;
}

.el-menu-vertical-demo {
    border-right: none;
    background-color: #f8f8f8;
}

.el-menu-item span {
    display: block;
    text-align: center;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
    background-color: #ffffff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}


.login-button {
    margin-right: 20px;
    background-color: #409eff;
    border-color: #409eff;
}

.el-main {
    flex-grow: 1;
    background-color: #ffffff;
    padding: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-aside {
    background-color: #f8f8f8;
}

.el-dropdown-menu__item {
    font-size: 14px;
}

.el-dropdown-menu {
    border-radius: 5px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>